<template>
  <div class="app-container">
    <div class="view-title">提现申请</div>
    <div class="search_box">
      <div class="input_box">
        <el-input
          v-model="userIdValue"
          placeholder="请输入用户id"
          :clearable="true"
        ></el-input>
      </div>
      <div class="input_box">
        <el-input
          v-model="nameValue"
          placeholder="请输入姓名"
          :clearable="true"
        ></el-input>
      </div>
      <div class="input_box">
        <el-input
          v-model="userNameValue"
          placeholder="请输入账号"
          :clearable="true"
        ></el-input>
      </div>
      <div class="input_box">
        <el-date-picker
          v-model="applyValue"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div>
        <el-button type="primary" size="small" @click="handleSearch"
          >搜索</el-button
        >
      </div>
      <el-col :span="6" style="margin-left: 15px">
        总提现金额： {{ sumBalance }}元
      </el-col>
    </div>
    <el-table
      :data="applicationTableData"
      v-loading="loading"
      element-loading-text="正在加载中"
      :header-cell-style="{
        borderColor: '#F0F0F0',
        height: '51px',
        background: '#F0F0F0',
        color: '#333',
      }"
      :row-style="{ height: '51px' }"
      :cell-style="{ borderColor: '#F0F0F0' }"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="name" label="姓名" width="180" align="center">
      </el-table-column>
      <el-table-column prop="user_id" label="用户id" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="card_no"
        label="支付宝账号/银行卡号/微信"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="type_name" label="提现方式" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.type_name }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="institution" label="提现银行" align="center">
      </el-table-column> -->
      <el-table-column prop="amount" label="提现金额" align="center">
      </el-table-column>
      <el-table-column prop="status" label="提现状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0"
            ><el-tag type="warning">审核中</el-tag></span
          >
          <span v-else-if="scope.row.status == 1"
            ><el-tag type="success">审核成功</el-tag></span
          >
          <span v-else-if="scope.row.status == 2"
            ><el-tag type="danger">审核失败</el-tag></span
          >
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="申请时间" align="center">
      </el-table-column>
      <el-table-column prop="updated_at" label="审核时间" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="230" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleExamine(scope.row)"
            type="text"
            size="small"
            :disabled="scope.row.status != 0"
            v-permission="['withdrawalApplication:audit']"
            >审核</el-button
          >
          <!-- <el-button
            type="text"
            size="small"
            @click="handlerDelete(scope.row)"
            v-permission="['withdrawalApplication:delete']"
            >删除</el-button
          > -->
          <el-button
            type="text"
            size="small"
            @click="handlerBalance(scope.row)"
            v-permission="['withdrawalApplication:showPrice']"
            >查看余额</el-button
          >
          <el-button type="text" size="small" @click="getOrderList(scope.row)"
            >查看订单</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 提现审核弹窗 -->
    <el-dialog
      title="提现审核"
      :visible.sync="examineDialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <div class="dialog_exmine_box">
        <div class="exmine_select_box">
          <div class="exmine_select_title">审核状态：</div>
          <div>
            <el-select v-model="exmineSelectValue" placeholder="请选择审核状态">
              <el-option
                v-for="item in exmineSelectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="exmine_reason_box">
          <div class="exmine_reason_title">审核原因：</div>
          <div>
            <el-input
              type="text"
              v-model="exmineInputValue"
              placeholder="请输入审核原因"
              style="width: 200px"
            ></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogExamine">取 消</el-button>
        <el-button type="primary" @click="sureDialogExamine">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 订单弹窗 -->
    <el-dialog
      title="查看订单"
      :visible.sync="orderDialogVisible"
      :close-on-click-modal="false"
      width="70%"
    >
      <el-table
        :data="orderTableData"
        :header-cell-style="{
          borderColor: '#F0F0F0',
          background: '#F0F0F0',
          color: '#333',
        }"
        :cell-style="{ borderColor: '#F0F0F0' }"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          width="180"
          prop="order_no"
          align="center"
          label="订单号"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="package_name"
          align="center"
          label="套餐名称"
        ></el-table-column>
        <el-table-column
          width="80"
          prop="contact"
          align="center"
          label="联系人"
        ></el-table-column>
        <el-table-column
          width="110"
          prop="mobile"
          align="center"
          label="手机号"
        ></el-table-column>
        <el-table-column
          prop="express_address"
          align="center"
          label="收件地址"
        ></el-table-column>
        <el-table-column
          prop="phonenum"
          align="center"
          label="生产号码"
        ></el-table-column>
        <el-table-column
          width="80"
          prop="original_yj"
          align="center"
          label="原始佣金"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="parent_yj"
          align="center"
          label="合伙人佣金"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="my_yj"
          align="center"
          label="分享者佣金"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="app_fxuser_phone"
          align="center"
          label="分享者手机号"
        ></el-table-column>
        <el-table-column
          width="180"
          prop="active_message"
          align="center"
          label="激活时间"
        ></el-table-column>
        <el-table-column
          width="180"
          prop="created_at"
          align="center"
          label="创建时间"
        ></el-table-column>
      </el-table>
      <pagination
        v-show="total1 > 0"
        :total="total1"
        :page.sync="pageNow1"
        :limit.sync="pageSize1"
        :autoScroll="false"
        @pagination="appGetOrderList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderDialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAppGetpayList,
  checkAppGetpay,
  deleteAppGetpay,
  appGetOrderList,
} from "@/api/withdrawalApplication.js";
import { getAppUserBalancesInfo } from "@/api/userManagement.js";
export default {
  data() {
    return {
      pageNow: 1,
      pageSize: 10,
      total: null,
      pageNow1: 1,
      pageSize1: 10,
      total1: 0,
      user_id: "",
      applicationTableData: [],
      examineDialogVisible: false,
      orderDialogVisible: false,
      orderTableData: [],
      exmineId: "",
      exmineSelectValue: "",
      exmineInputValue: "",
      exmineSelectOptions: [
        {
          value: "1",
          label: "审核通过",
        },
        {
          value: "2",
          label: "审核不通过",
        },
      ],
      deleteId: "",
      loading: true,
      balanceId: "",
      userIdValue: "",
      nameValue: "",
      userNameValue: "",
      applyValue: "",
      sumBalance: "",
    };
  },
  mounted() {
    this.getAppGetpayList();
  },
  methods: {
    // 获取用户余额
    getAppUserBalancesInfo() {
      getAppUserBalancesInfo({
        user_id: this.balanceId,
      }).then((res) => {
        if (res.code == 1) {
          this.balancePrice = res.data.balance;
          this.$notify({
            dangerouslyUseHTMLString: true,
            message: `<strong>当前余额：${this.balancePrice}元</strong>`,
          });
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 获取提现申请
    getAppGetpayList() {
      getAppGetpayList({
        user_id: this.userIdValue,
        name: this.nameValue,
        card_no: this.userNameValue,
        created_at_start: this.applyValue[0],
        created_at_end: this.applyValue[1],
        page_now: this.pageNow,
        page_size: this.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.loading = false;
          this.applicationTableData = res.data;
          this.sumBalance = res.sum_balance;
          this.total = res.page_info.total_count;
        } else {
          this.loading = false;
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 提现审核
    checkAppGetpay() {
      checkAppGetpay({
        id: this.exmineId,
        status: this.exmineSelectValue,
        reason: this.exmineInputValue,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.examineDialogVisible = false;
          this.getAppGetpayList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 删除申请
    deleteAppGetpay() {
      deleteAppGetpay({
        ids: this.deleteId,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.getAppGetpayList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 审核
    handleExamine(val) {
      this.exmineId = val.id;
      this.examineDialogVisible = true;
    },

    // 提现审核确定
    sureDialogExamine() {
      if (this.exmineSelectValue == "") {
        this.$message.error("请选择审核状态");
        return;
      }
      this.checkAppGetpay();
    },

    // 提现审核取消
    cancelDialogExamine() {
      this.examineDialogVisible = false;
    },

    // 删除
    handlerDelete(val) {
      this.deleteId = val.id;
      this.$confirm("是否确定删除该提现申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteAppGetpay();
        })
        .catch(() => {});
    },

    // 选择日期
    handleChangeDate(e) {},

    // 搜索
    handleSearch() {
      this.getAppGetpayList();
    },

    // 查看余额
    handlerBalance(val) {
      this.balanceId = val.user_id;
      this.getAppUserBalancesInfo();
    },
    getOrderList(val) {
      this.user_id = val.user_id;
      this.appGetOrderList();
    },
    appGetOrderList() {
      let params = {
        sett_status: 1,
        fxuser_id: this.user_id,
        page_now: this.pageNow1,
        page_size: this.pageSize1,
      };
      appGetOrderList(params).then((res) => {
        this.orderDialogVisible = true;
        if (res.code === 1) {
          this.orderTableData = res.data;
          this.total1 = res.page_info.total_count;
        }
      });
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAppGetpayList();
    },
    handleCurrentChange(val) {
      this.pageNow = val;
      this.pageSize = 10;
      this.getAppGetpayList();
    },
  },
};
</script>
<style lang="scss" scoped>
.search_box {
  display: flex;
  align-items: center;

  .input_box {
    margin-right: 10px;
  }
}

.dialog_exmine_box {
  .exmine_select_box {
    display: flex;
    align-items: center;
    padding-bottom: 10px;

    .exmine_select_title {
      padding-right: 10px;
    }
  }

  .exmine_reason_box {
    display: flex;
    align-items: center;

    .exmine_reason_title {
      padding-right: 10px;
    }
  }
}
</style>
